﻿<!--@Knockout-->
<div class="demo-page">
    <div data-bind="dxButton:{ text: 'Subscribe to SelectionChanged event', onClick: clickHandler }"></div></br>
    <div data-bind="dxButton: { text: '<< prev', onClick: goBack }"></div>
    <div data-bind="dxButton: { text: 'next >>', onClick: goForward }"></div>
    <div data-bind="dxMultiView: {
		dataSource: multiViewItems,
		selectedIndex: currentIndex,
		onInitialized: initializedHandler,
		height: 160
	}">
        <div data-options="dxTemplate : { name: 'item' } ">
            <div style="margin:25px;">
                <h1 data-bind="text: title"></h1>
                <p>&nbsp;</p>
                <div style="text-align:left;" data-bind="foreach: dataArray">
                    <p><span data-bind="text: propertyKey"></span>: <b data-bind="text: propertyValue"></b></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ text: 'Subscribe for SelectionChanged event' ,onClick: clickHandler }"></div></br>
    <div dx-button="{ text: '<< prev', onClick: goBack }"></div>
    <div dx-button="{ text: 'next >>', onClick: goForward }"></div>
    <div dx-multi-view="{
        dataSource: multiViewItems,
        height: 160,
		onInitialized: initializedHandler,
        bindingOptions: {
            selectedIndex: 'currentIndex'
        }
    }" dx-item-alias="itemObj">
        <div data-options="dxTemplate: { name: 'item' }">
            <div style="margin:25px;">
                <h1>{{itemObj.title}}</h1>
                <p>&nbsp;</p>
                <div style="text-align:left;" ng-repeat="(key, value) in itemObj.data">
                    <p>{{key}}: <b>{{value}}</b></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div class="demo-page">
    <div id="myButton"></div></br>
    <div id="backButton"></div>
    <div id="forwardButton"></div>
    <div id="myMultiView"></div>
</div>
<!--/@jQuery-->
